<template>
    <div>
        <full-calendar :events="events" lang="zh" first-day='1' locale="fr"
            @dayClick="dayClick"
            @eventClick="eventClick">
            <!-- 插槽 -->
            <div slot="fc-header-left">
                left
            </div>
        </full-calendar>
        <!-- 配置插槽 -->
        <template>
            <slot name="fc-header-left"></slot>
        </template>
        <!-- 点击以后的弹出层 -->
        <el-dialog title="日常详情" :visible.sync="dialogFormVisible">
            <!-- 表单 -->
            <el-form :model="form">
                <el-form-item label="日程名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="日程安排" :label-width="formLabelWidth">
                    <!-- 这个地方得在家一个 regions的变量，用来保存option循环的值，不然会冲突 -->
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option 
                            :label="item.title" 
                            :value="item.value" 
                            v-for="(item,index) in form.regions" 
                            :key="index">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="日程描述" :label-width="formLabelWidth">
                   <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.textarea"></el-input>
                </el-form-item>
            </el-form>
            <!-- 确定，取消按钮 -->
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submits">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import fullCalendar from 'vue-fullcalendar'

export default {
    data(){
        return {
            events: [ 
                {
                    title : '项目1', //标题
                    start : '2018-11-14',//开始时间
                    end : '2018-11-14', //结束时间
                    YOUR_DATA : {   //自定义属性
                        name:'张三',
                        age:24,
                        item:[
                            {title:'日程安排01',value:0},
                            {title:'日程安排02',value:1}
                        ]
                    } 
                },
                {
                    title : '玩耍', //标题
                    start : '2018-11-18',//开始时间
                    end : '2018-11-18', //结束时间
                    YOUR_DATA : {   //自定义属性
                        item:[
                            {title:'唱歌',value:0},
                            {title:'跳舞',value:1}
                        ]
                    },
                    cssClass:'active'//定义class
                } 
            ],
            zh:{
                weekNames : ['周一','周二','周三','周四','周五','周六','周日'],
                monthNames : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','11月','12月'],
                titleFormat : 'yyyy年MM月'
            },
            dialogFormVisible:false,//控制弹出层是否弹出
            formLabelWidth:"140px",//form的宽度
            form: { //填充在表单里面的数据
                name: '',
                region: '',
                regions:'',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: '',
                textarea:''
            },
        }
    },
    methods:{
        //点击某一天触发的事件
        dayClick(day,jsEvent){
            console.log(day,jsEvent)
        },
        //点击日程触发的事件
        eventClick(event, jsEvent, pos){
            console.log(event,jsEvent,pos)
            //赋值
            this.form.name = event.title
            this.form.regions = event.YOUR_DATA.item
            console.log(this.form.region)
            //弹出表单
            this.dialogFormVisible = true
        },
        //弹出层点击确定以后
        submits(){
            this.dialogFormVisible = false
            console.log(this.form)
        }
    },
    components:{
        fullCalendar
    }
}
</script>

<style>
.active{
    color:#F60 !important;
    background-color: #AFA !important;
}
</style>
